var InputList = Backbone.View.extend({
	initialize : function() {
		this.render();
	},
	render : function() {
		var html = _.template($("#line_template").html(), this.model.toJSON()
		// , {variable : 'data'}
		);
		this.blockName = this.model.get('block');
		this.inputs = $(html);
		this.$el.html(this.inputs);
		this.lineGrid = new ZoomGrid({
			container : $(".line-editor",this.$el)[0],//this.inputs[0],
			rows : 1,
			foldedSize : {
				width : 60,
				height : 60
			},
			paddingMarginBorder : {
				width : 5,
				height : 5
			},
			zoomOnHover : true
		});
		var step = function(w, c){
			// console.log($('span.add-on', c).outerWidth())
			$('input', c).stop().animate({width: w-$('span.add-on', c).outerWidth()-13})
		};
		this.lineGrid.zoomStep = step;
		this.lineGrid.restoreStep = step;
		var t = this;
		var getUrl = function () {
			var u = url[t.blockName]
			for(var i in arguments){
				u = u.replace(i, arguments[i])
			}
			return url.base + u;
		};
		$('input', this.inputs).keyup(function(){
			if($(this).val() == $(this).attr('v'))
				return;
			var len = $(this).val().length;
			
			if(!t.inputs.attr('len') || t.inputs.attr('len')-0 < len)
				t.inputs.attr('len',len);
							
			if(len < 2 && t.inputs.attr('len')-0 < 2){
				var rs = $('[name='+t.blockName+'] .result-table');				
				util.alert(
					"The input length should be <strong> at least 2</strong> characters",
					rs
				).alert();
			}

			if(!t.inputs.attr('len') || t.inputs.attr('len')-0 < len)
				t.inputs.attr('len',len);
				
			//console.log(getUrl($(this).attr('col'),$(this).val()));
			$(this).attr('v', $(this).val())
		})
		// this.lineGrid.restore();
	}
}); 